<template>
  <div>
    <div class="tablesB">
     <ViewTitle text="基础信息" />
      <div class="selects">
        <div v-for="(item,index) in arryPut" :key="index">
          <div>{{item.title}}:</div>
          <div v-if="item.props=='with_user'">
            <el-input  size="mini" 

                v-model="params.with_user"
                   
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>
          <!-- $baseBai['gender'][].label -->
           <div v-else-if="item.props=='gender'">
            <el-input  size="mini" 


               :value="$baseBai['gender'][(patientInfo[item.props]-1)].label"
                    disabled
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>
          <div v-else>
            <el-input  size="mini" 

                v-model="patientInfo[item.props]"
                    disabled
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>

          
        </div>
      <div >
          <div>发病时间：</div>
         
          <div >
          
                <el-date-picker
          
                v-model="attack_date"
                size="mini"
                type="date"
                
            
                value-format="yyyy-MM-dd"
                placeholder="发病时间"
              >
              </el-date-picker> 
          </div>
        </div>
           <div >
          <div>是否传染：</div>
         
          <div >
          

            <el-select
          size="mini"
          v-model="is_infect"
          placeholder="请选择是否传染"
        >
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="2"></el-option>
        </el-select>
          </div>
        </div>
      </div>
       <ViewTitle text="诊断信息" />

          <div class="selects">
        <div>
          <div>诊断:</div>
          <div >
            <selectInput placement="top" :thatF="this"></selectInput>
          </div>
        </div>
          </div>

           <div v-if="tableData1.length>0">
            <el-table :data="tableData1" style="width: 100%">
              <el-table-column
                v-for="(item, index) in tableTitle"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
              >
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData1)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
         
       
       <ViewTitle style="margin-top:5px" text="就诊信息" />
      <div class="list">
            <div v-for="(item,index) in listPut" :key="index">
            <div>{{item.title}}:</div>
            <div >
            <el-input  size="mini" 
            
                type="textarea"
                  style="font-size:15px"
                   :rows="3"
                   v-model="params[item.props]"
                :placeholder="item.placeholder"
            >
            </el-input>
          </div>
        </div>

        
        
      </div>
    </div>
  </div>
</template>
<script>
let t;
import selectInput from "@/components/select";
import ViewTitle from "@/forComponents/viewTitle/index.vue";
import { mapState,mapMutations } from "vuex";
export default {
  props: ["thatF"],

  data() {
    return {
           setSelectInput:{
          placeholder:'请选择',
          key:'zhengduan',
          url:'getClinic_doctorgetDiseaseDict',
         keyword:'',
         id:'',
        code:'',
        tableData1:[],
        placement:'top',
        list:[
        
          {label:'疾病编码',prop:'code'},
          {label:'疾病名称',prop:'name'},
          {label:'分类名称',prop:'category'},
          
        ],

      },   
         arryPut:[
             {
                 placeholder:'请输入',
                 props:'name',
                
                 title:'姓名',
             },
               {
                 placeholder:'请输入',
                 props:'gender',
                 title:'性别',
             },
               {
                 placeholder:'请输入',
                 props:'birthday',
                 title:'出生日期',
             },
               {
                 placeholder:'请输入',
                 props:'patient_no',
                 title:'门诊号',
             },
               {
                 placeholder:'请输入',
                 props:'dept_name',
                 title:'科室',
             },
               {
                 placeholder:'请输入',
                 props:'real_name',
                 title:'接诊医生',
             },
            //    {
            //      placeholder:'请输入',
            //      props:'start_time',
            //      title:'接诊时间',
            //  },
            //    {
            //      placeholder:'请输入',
            //      props:'name',
            //      title:'就诊种类',
            //  },
            //    {
            //      placeholder:'请输入',
            //      props:'name',
            //      title:'陪护人',
            //  },
            //    {
            //      placeholder:'请输入',
            //      props:'name',
            //      title:'电话',
            //  },
               {
                 placeholder:'请输入供史人',
                 props:'with_user',
                 title:'供史人',
             },
             
         ],
     
         listPut:[
              {
                 placeholder:'请输入',
                 props:'main_desc',
                 title:'主诉',
             },
             
               {
                 placeholder:'请输入',
                 props:'medical_now',
                 title:'现病史',
             },
             {
                 placeholder:'请输入',
                 props:'medical_history',
                 title:'既往史',
             },
             {
                 placeholder:'请输入',
                 props:'family_history',
                 title:'家族史',
             },
             {
                 placeholder:'请输入',
                 props:'allergy_history',
                 title:'过敏史',
             },
             
            
             {
                 placeholder:'请输入',
                 props:'body_check',
                 title:'体格检查',
             },
             {
                 placeholder:'请输入',
                 props:'spirit_check',
                 title:'精神检查',
             },
             {
                 placeholder:'请输入',
                 props:'check_result',
                 title:'检查结果',
             },
            //  {
            //      placeholder:'请输入',
            //      props:'diagnosis',
            //      title:'诊断',
            //  },
             {
                 placeholder:'请输入',
                 props:'treatment',
                 title:'治疗意见',
             },
               {
                 placeholder:'请输入',
                 props:'instruction',
                 title:'指导意见',
             },
              {
                 placeholder:'请输入',
                 props:'remark',
                 title:'备注',
             },
            
         ],
         params:{
             patient_no:'',
             main_desc:'',
             medical_now:'',
             medical_history:'',
             allergy_history:'',
           
             treatment:'',
             instruction:'',
             body_check:'',
             check_result:'',
             remark:'',
             with_user:'',
             family_history:'',
             spirit_check:'',
         },
         tableTitle:[],
            attack_date:'',
        is_infect:'',
    };
  },
 computed: {
    ...mapState({
       huixian_detail: (state) => state.doctorWorkStation.huixian_detail,

       tableData1: (state) => state.doctorWorkStation.tableData1,
      patientInfo: state => {
          let d=state.doctorWorkStation.patientInfo;
          console.log('this',t)
          return {
              name:d.member_info.name,
              gender:  d.member_info.gender,
              birthday:d.member_info.birthday,
              patient_no:d.patient_no,
              dept_name:d.doctor_info.dept_name,
              real_name:d.doctor_info.real_name,
              start_time:d.start_time,
              with_user:'',
             // state.doctorWorkStation.patientInfo
          }
      }
    }),
  },
  
    watch : {
        huixian_detail:function(v1,v2) {
         
         
         this.$nextTick(()=>{

             if(v1.id){
               console.log("走1")
             t.params.with_user= v1.with_user;
                
                t.attack_date=v1.attack_date;
                if(v1.is_infect){
                   t.is_infect=parseInt(v1.is_infect);
                }else{
                  t.is_infect='';
                }
               
          
              t['doctorWorkStation/set_tableData1'](v1.diagnosis)
              t.params.main_desc=v1.main_desc;
              t.params.medical_now=v1.medical_now;

              t.params.medical_history=v1.medical_history;
              t.params.family_history=v1.family_history;
              t.params.allergy_history=v1.allergy_history;
              t.params.body_check=v1.body_check;
              t.params.check_result=v1.check_result;
              t.params.treatment=v1.treatment;
              t.params.spirit_check=v1.spirit_check;
              t.params.instruction=v1.instruction;
              t.params.remark=v1.remark;
              

           }else{
                console.log("走2")
              t.params.with_user= '';
                
                t.attack_date='';
             
                  t.is_infect='';
                
               
          
              t['doctorWorkStation/set_tableData1']([])
              t.params.main_desc='';
              t.params.medical_now='';

              t.params.medical_history='';
              t.params.family_history='';
              t.params.allergy_history='';
              t.params.body_check='';
              t.params.check_result='';
              t.params.treatment='';
              t.params.spirit_check='';
              t.params.instruction='';
              t.params.remark='';
              
           }

        });
         
           
        },
      
      
    },
  mounted() {
    t = this;
     t.tableTitle = this.$baseBai["workstation"]["right_two_table_title"];
   
    // console.log("thatF.PatientInfoData",t.thatF.thatF.PatientInfoData[member_info.name])
  },
  methods: {
    ...mapMutations([
				'doctorWorkStation/set_tableData1',
			]),
     deleteRow(index, rows) {
      rows.splice(index, 1);
    },
       getDiseaseDict() {
      let d = {
        keyword: this.selectParams.keyword,
      };

      this["_API"].getClinic_doctorgetDiseaseDict(d).then((res) => {
        if (res.code == 200) {
          this.selectData.selectData1 = res.data.lists;
          this.threeSelectLoading = false;
        }
      });
    },

    clearData(){
        t.params= {
             patient_no:t.params.patient_no,
             main_desc:'',
             medical_now:'',
             medical_history:'',
             allergy_history:'',
           
             treatment:'',
             instruction:'',
             body_check:'',
             check_result:'',
             remark:'',
             with_user:'',
             family_history:'',
             spirit_check:'',
         }

         t.attack_date='';
         t.is_infect='';
    },
  },
  components: {
        ViewTitle,
        selectInput
  },
};
</script>
<style lang='scss' scoped>

/deep/ .selects {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 100px;
   
    margin-right: 10px;
  }
  > div {
    margin-top: 5px;
    width: 32%;
    display: flex;
    align-items: center;
  }
  input{
    width: 200px;
  }
}

/deep/ .list {
  display: flex;
//   align-items: center;
justify-content: center;
  flex-direction: column;
  margin-left: 5px;
  > div > div:nth-child(1) {
    text-align: justify;
    width: 73px;
   
    margin-right: 10px;
  }
 > div > div:nth-child(2) {
  
  
      width: 50%;
    
  }

  > div {
    margin-top: 20px;
    align-items: center;
    display: flex;

  }
 
}
.viewTitle-essential{
  margin: 10px 0;
}
</style>